<template>
  <div id="bg" :class="{'hidden':!selfShow}">
    <div class="main-bg" id="mg" >
      <div style="width: 1000px;margin: 80px auto;background: #FFFFFF;height: 600px;border-radius: 10px">
        <div class="title-header4">
            <h2 style="color:#FFFFFF;font-size: 30px" class="myTitle">动画质量说明</h2>
            <span class="s100 el-icon-close" @click="onClose"></span>
        </div>

        <div class="block"
             v-if="show === 1">
          <el-carousel trigger="click"
                       height="500px"
                       :autoplay="false">
            <el-carousel-item v-for="(item,index) in resourceData"
                              :key="index">
              <div style="display: flex;height: 500px">
                <div style="display: flex;flex-direction: column;width: 250px;margin-left: 50px;margin-top: 110px">
                  <h3>{{ item.title}}</h3>
                  <span class="popup-word">{{item.word}}</span>
                </div>
                <div>
                  <img :src="item.photo"
                       style="width: 600px;height: 440px;margin-left: 25px">
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
  import bus from '../../assets/eventBus'

  export default {
    name: "Difference",
    data() {
      return {
        selfShow: false,
        show:1,
        resourceData:[{
          title:'动画质量低',
          word:'样子不会发生变化的物体的简单位移旋转动画。',
          photo:require('../../assets/images/low.gif')
        },
          {
            title:'动画质量中',
            word:'配件较多的物体进行比较复杂的时间较短的动画和人物以及动物的简单待机动画。',
            photo:require('../../assets/images/middle.gif')
          },
          {
            title:'动画质量高',
            word:'配件非常多的复杂物体进行一系列完整流程的长时间动画和人物动物的走路跑步等较简单的循环动画。',
            photo:require('../../assets/images/heigh.gif')
          },
          {
            title:'动画质量极高',
            word:'人物和动物实现一系列复杂动作以及时间较长的动画。',
            photo:require('../../assets/images/huge.gif')
          }
        ],
      }
    },
    created() {
    },
    mounted() {
      let that = this
      bus.$on('ExplainShow', function () {
        that.selfShow = true
        that.show=1
      })
    },
    methods: {
      onClose() {
        this.selfShow = false
        this.show=2
      },
    }
  }


</script>


<style>
  .myTitle {
    font-size: 30px;
    margin-left: 310px;
    color: white;
    letter-spacing: 3px;
  }

  .hidden {
    display: none;
  }

  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    top: 0;
    left:0;
    z-index: 999;
    overflow-y: auto;
  }

  .top {
    height: 55px;
    background: #4381E6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-top: 25px;
  }

  h3{

  }

  .popup-word {
    margin-top: 20px;
    font-size: 18px;
    color: #535456;
    text-align: left;
    line-height: 30px;
  }

  .el-carousel__button{
    height: 4px;
    width: 45px;
    background-color: #E3E3E3 ;
    opacity: 1;
  }

  .el-carousel__indicator.is-active button {
    opacity: 1;
    background: #3A8CFF;
  }

  .el-carousel__arrow{
    border-radius: 0;
    height:90px;
    width: 35px;
  }


  .s100 {
    font-size: 26px;
    margin-left: 315px;
    color: white;
    margin-top: 5px;
  }

  .s100:hover{
    cursor: pointer;
  }

  .title-header4{
    display: flex;
    flex-direction: row;
    height: 55px;
    background: #4381E6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-top: 25px;
  }

  .myTitle {
    font-size: 20px;
    margin-left: 430px;
  }
</style>
